<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
        <title>Air Datepicker - development</title>
        <style type="text/css">

            .container  {
                max-width: 700px;
                margin: 200px auto;
                overflow: auto;
                height: 500px;
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            input[type='text'] {
                width: 300px;
                height: 32px;
                margin: 0 0 16px;
            }

            .input-wrap {
                padding: 1px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .actions {
                margin: 16px 0;
                display: flex;
                grid-gap: 16px;
                justify-content: center;
            }

            .air-datepicker.-disabled- {
                --adp-cell-background-color-selected: rgba(0, 0, 0, 0.1);
                --adp-cell-background-color-in-range: rgba(0, 0, 0, 0.05);
            }

        </style>
    </head>
    <body>
    <div class="dp-custom"></div>
    <div class="container">
        <div class='input-wrap'>
            <input type="text" readonly id="dp1" />
        </div>

        <div class="actions">
            <button id='update'>update</button>
            <button id='destroy'>destory</button>
            <button id='action'>action</button>
        </div>

    </div>
    </body>
</html>
